<template>
  <div :style="{ width: props.width, height: props.height }">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      :width="props.width"
      :height="props.height"
      viewBox="0 0 373.292 236.674"
      preserveAspectRatio="none meet"
    >
      <defs>
        <linearGradient
          id="linear-gradient"
          x1="1.04"
          y1="0.5"
          x2="0.134"
          y2="0.5"
          gradientUnits="objectBoundingBox"
        >
          <stop offset="0" :stop-color="states.color" />
          <stop offset="1" :stop-color="states.color" stop-opacity="0" />
        </linearGradient>
        <linearGradient
          id="linear-gradient-2"
          x1="-0.04"
          x2="0.866"
          xlink:href="#linear-gradient"
        />
      </defs>
      <g id="文字边框1" transform="translate(-542.102 -106.054)">
        <g id="组_5014" data-name="组 5014">
          <path
            id="路径_1155"
            data-name="路径 1155"
            d="M581.023,117.361H542.685v223.03h38.338"
            fill="none"
            :stroke="states.color"
            stroke-miterlimit="10"
            stroke-width="1.166"
          />
          <path
            id="路径_1156"
            data-name="路径 1156"
            d="M549.531,198.639v59.675l-6.789,6.789v-73.31Z"
            :fill="states.color"
          />
        </g>
        <g id="组_5015" data-name="组 5015">
          <path
            id="路径_1157"
            data-name="路径 1157"
            d="M876.473,117.361h38.338v223.03H876.473"
            fill="none"
            :stroke="states.color"
            stroke-miterlimit="10"
            stroke-width="1.166"
          />
          <path
            id="路径_1158"
            data-name="路径 1158"
            d="M907.965,198.639v59.675l6.789,6.789v-73.31Z"
            :fill="states.color"
          />
        </g>
        <g id="组_5016" data-name="组 5016" transform="translate(0 -23.9)">
          <path
            id="路径_1184"
            data-name="路径 1184"
            d="M.664.064H6.5L12.832,20.51H7Z"
            transform="translate(629.35 132.681)"
            :fill="states.color"
          />
          <path
            id="路径_1188"
            data-name="路径 1188"
            d="M12.832.064H7L.664,20.51H6.5Z"
            transform="translate(814.457 132.682)"
            :fill="states.color"
          />
          <line
            id="直线_2"
            data-name="直线 2"
            x2="172.978"
            transform="translate(642.182 130.537)"
            fill="none"
            :stroke="states.color"
            stroke-miterlimit="10"
            stroke-width="1.166"
          />
          <path
            id="路径_1159"
            data-name="路径 1159"
            d="M667.3,137.871H825.728l8.106-20.51H660.894Z"
            transform="translate(-18.713 15.32)"
            :fill="states.color"
          />

          <path
            id="路径_1183"
            data-name="路径 1183"
            d="M.664.064H6.5L12.832,20.51H7Z"
            transform="translate(619.35 132.681)"
            :fill="states.color"
          />
          <path
            id="路径_1187"
            data-name="路径 1187"
            d="M12.832.064H7L.664,20.51H6.5Z"
            transform="translate(824.457 132.682)"
            :fill="states.color"
          />
          <path
            id="路径_1185"
            data-name="路径 1185"
            d="M-29.336.064H6.5L12.832,20.51H-23Z"
            transform="translate(608.35 132.681)"
            fill="url(#linear-gradient)"
          />
          <path
            id="路径_1186"
            data-name="路径 1186"
            d="M12.832.064H-23L-29.336,20.51H6.5Z"
            transform="translate(865.457 132.682)"
            fill="url(#linear-gradient-2)"
          />
        </g>
        <g id="组_5017" data-name="组 5017">
          <line
            id="直线_3"
            data-name="直线 3"
            x2="172.978"
            transform="translate(642.182 341.047)"
            fill="none"
            :stroke="states.color"
            stroke-miterlimit="10"
            stroke-width="1.166"
          />
          <path
            id="路径_1160"
            data-name="路径 1160"
            d="M665.915,334.7H790.057l6.352,6.352H660.894Z"
            :fill="states.color"
          />
          <rect
            id="矩形_32"
            data-name="矩形 32"
            width="5.832"
            height="5.832"
            transform="translate(587.717 336.895)"
            :fill="states.color"
          />
          <rect
            id="矩形_33"
            data-name="矩形 33"
            width="5.832"
            height="5.832"
            transform="translate(598.264 336.895)"
            :fill="states.color"
          />
          <rect
            id="矩形_34"
            data-name="矩形 34"
            width="5.832"
            height="5.832"
            transform="translate(608.81 336.895)"
            :fill="states.color"
          />
          <rect
            id="矩形_35"
            data-name="矩形 35"
            width="5.832"
            height="5.832"
            transform="translate(619.357 336.895)"
            :fill="states.color"
          />
          <rect
            id="矩形_36"
            data-name="矩形 36"
            width="5.832"
            height="5.832"
            transform="translate(629.903 336.895)"
            :fill="states.color"
          />
          <rect
            id="矩形_37"
            data-name="矩形 37"
            width="5.832"
            height="5.832"
            transform="translate(821.606 336.895)"
            :fill="states.color"
          />
          <rect
            id="矩形_38"
            data-name="矩形 38"
            width="5.832"
            height="5.832"
            transform="translate(832.152 336.895)"
            :fill="states.color"
          />
          <rect
            id="矩形_39"
            data-name="矩形 39"
            width="5.832"
            height="5.832"
            transform="translate(842.699 336.895)"
            :fill="states.color"
          />
          <rect
            id="矩形_40"
            data-name="矩形 40"
            width="5.832"
            height="5.832"
            transform="translate(853.245 336.895)"
            :fill="states.color"
          />
          <rect
            id="矩形_41"
            data-name="矩形 41"
            width="5.832"
            height="5.832"
            transform="translate(863.792 336.895)"
            :fill="states.color"
          />
        </g>
      </g>
      <text
        x="50%"
        y="8%"
        font-family="font"
        :font-size="states.fontSize"
        :fill="states.fontColor"
        style="text-anchor: middle"
      >
        {{ states.text }}
      </text>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});

const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;
</script>

<style scoped lang="scss"></style>
